<template>
  <!-- 导出表格弹窗 -->

  <el-dialog
    :title="$t('staff.Upload')"
    :close-on-click-modal="false"
    :visible.sync="editExportVisible"
    width="40%"
  >
    <el-form ref="formExp" :model="formExp" label-width="120px" :rules="rules">
      <!--部门-->
      <el-form-item
        :label="$t('operating.importType')"
        prop="exportType"
        :rules="filter_rules({ required: '请选择导入类型' })"
      >
        <el-select
          v-model="formExp.exportType"
          filterable
          :placeholder="$t('operating.pleaseChosen')"
        >
          <el-option
            v-for="item in exportData"
            :key="item.value"
            :label="item.label"
            :value="item.exportType"
          />
        </el-select>
        <span>
          <el-popover
            placement="top-start"
            title="友情提示"
            width="200"
            trigger="hover"
            content="不选,默认是追加导入"
          >
            <i
              slot="reference"
              class="iconfont iconquestion1"
              style="margin-left: 10px; font-size: 25px"
            />
          </el-popover>
        </span>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          action=""
          drag
          :before-upload="beforeupload"
          :file-list="fileList"
        >
          <!-- <el-button size="mini" @click="isFileList" type="primary">{{
            $t("operating.upload")
          }}</el-button> -->
          <i class="el-icon-upload" @click="isFileList" />
          <div class="el-upload__text" @click="isFileList">
            将文件拖到此处，或<em>{{ $t("operating.upload") }}</em>
          </div>
          <div slot="tip" class="el-upload__tip" style="color:red;">{{ textName }}</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <!--操作-->
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        class="edit_confirm"
        @click="saveFileEdit('formExp')"
      >{{ $t("operating.determine") }}</el-button>
      <el-button @click="closeDialog()">{{ $t("operating.cancel") }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addFile, coverFile } from '@/api/cy.js'
export default {
  props: {
    // 是否显示弹窗
    isShow: {
      type: Boolean,
      default: false
    },
    // 追加路径地址
    addPath: {
      type: String,
      default: '',
      required: true
    },
    // 上传路径地址
    coverPath: {
      type: String,
      default: '',
      required: true
    },

    tipText: {
      type: String,
      default: '提示:只能上传xls/xlsx文件，且不超过500kb'
    }
  },
  data() {
    return {
      rules: {},
      editExportVisible: this.isShow,
      addPathUrl: this.addPath,
      coverPathUrl: this.coverPath,

      exportData: [
        { exportType: 0, label: '追加导入' },
        { exportType: 1, label: '覆盖导入' }
      ],
      rules:{},
      file: new FormData(), // 导入文件
      dialogStatus: '',
      fileList: [],
      rateHeartColumnWidth: 100,
      textName: this.tipText,
      formExp: {
        exportType: 0
      }
    }
  },

  watch: {
    isShow(value, oldvalue) {
      this.editExportVisible = value
      this.dayin()
    },
    addPath(value, oldvalue) {
      this.addPathUrl = value
    },
    coverPath(value, oldvalue) {
      this.coverPathUrl = value
    }
  },
  mounted() {
    this.dayin()
  },

  methods: {
    dayin() {
      console.log(this.isShow, this.addPath, this.addPathUrl)
    },
    // 阻止upload的自己上传，进行再操作
    beforeupload(file) {
      const fileNameArr = file.name.split('.')
      const typeName = fileNameArr[fileNameArr.length - 1].toLocaleLowerCase()
      if (typeName != 'xls' && typeName != 'xlsx') {
        this.$message('上传文件只能是 xls、xlsx 格式!')
        return false
      }
      // 创建临时的路径来展示图片
      // const windowURL = window.URL || window.webkitURL
      // this.imgSrc = windowURL.createObjectURL(file);
      this.file.append('file', file)
      this.textName = file.name
      return false
    },
    // 确定导入文件
    saveFileEdit(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          const eptType = this.formExp.exportType
          if (eptType == 0) {
            // 追加导入
            addFile('/resource/importAppend', this.file, {
              'Content-Type':
                'multipart/form-data;boundary = ' + new Date().getTime()
            })
              .then((res) => {
                const RES = this.responseUse(res, true)

                if (RES) {
                  this.editExportVisible = false
                  // this.getStaffList();
                  // this.getDeptList();
                  this.$emit('changeShow', false)
                }

                this.file = new FormData()
              })
              .catch((error) => {
                this.file = new FormData()
                console.log(error)
              })
          } else if (eptType == 1) {
            // 覆盖导入
            coverFile('/resource/importReplace', this.file, {
              'Content-Type':
                'multipart/form-data;boundary = ' + new Date().getTime()
            })
              .then((res) => {
                const RES = this.responseUse(res, true)
                if (RES) {
                  this.editExportVisible = false
                  // this.getStaffList();
                  // this.getDeptList();
                  this.$emit('changeShow', false)
                }

                this.file = new FormData()
              })
              .catch((error) => {
                this.file = new FormData()
                console.log(error)
              })
          }
        }
      })
    },
    isFileList() {
      this.fileList = []
    },
    closeDialog() {
      this.editExportVisible = false
      this.$emit('changeShow', false)
    }
  }
}
</script>

<style scoped>
</style>
